<template>
    <el-select v-model="selectedValue" placeholder="请选择" clearable @change="handleChange">
      <el-tree :data="treeData" :props="treeProps" node-key="id" accordion @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">{{ data.label }}</span>
      </el-tree>
    </el-select>
  </template>
  <script>
export default {
  data() {
    return {
      selectedValue: '', // 选择的值
      treeData: [], // 树状结构的选项数据
      treeProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleChange(value) {
      // 处理选择值的变化
      console.log('Selected Value:', value);
    },
    handleNodeClick(node) {
      // 处理树节点的点击事件
      console.log('Clicked Node:', node);
    }
  },
  created() {
    // 初始化树状结构的选项数据
    this.treeData = [
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 1-1'
          },
          {
            id: 3,
            label: 'Node 1-2'
          }
        ]
      },
      {
        id: 4,
        label: 'Node 2'
      }
    ];
  }
};
</script>